<template>
  <u-popup :show="isShow" round="8" @close="onClose">
    <view>
      <view
        style="
          padding: 0 12px;
          margin-top: 16px;
          display: flex;
          align-items: center;
          justify-content: space-between;
        "
      >
        <input
          style="background-color: #ececec; padding: 7px 8px; flex: 1"
          v-model="font.text"
          placeholder="请输入文字"
          :style="{
            color: font.color,
            fontFamily: font.fontFamily,
          }"
        />
        <u-icon
          name="checkbox-mark"
          size="28"
          @click="confirm"
          style="margin-left: 12px"
        ></u-icon>
      </view>
      <u-tabs
        @click="onClick"
        :list="[
          {
            name: '颜色',
          },
          {
            name: '字体',
          },
          {
            name: '大小',
          },
        ]"
        style="margin-bottom: 15px"
      >
      </u-tabs>
      <t-color-picker
        @setColor="setColor"
        v-show="selectedIndex === 0"
        :color="getRgbaColor"
        ref="colorPicker"
      ></t-color-picker>
      <view
        v-show="selectedIndex === 1"
        style="
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          padding: 0 12px;
        "
      >
        <div
          v-for="(item, index) in fonts"
          :class="{
            primary: true,
            active: active === index,
          }"
          :style="{
            fontFamily: item.value,
          }"
          @click="
            () => {
              active = index;
              font.fontFamily = fonts[index].value;
            }
          "
        >
          {{ item.name }}
        </div>
      </view>
      <view
        style="display: flex; align-items: center; padding: 0 12px;margin-bottom: 12px;min-height:62px"
        v-show="selectedIndex === 2"
      >
        <span
          :style="{
            fontSize: font.fontSize + 'px',
            fontFamily: font.fontFamily,
            width:'100px'
          }"
          >{{ "示例" }}</span
        >
        <u-slider
          style="flex: 1"
          v-model="font.fontSize"
          min="18"
          max="48"
        ></u-slider>
      </view>
    </view>
  </u-popup>
</template>
<script>
import tColorPicker from "@/components/t-color-picker/t-color-picker.vue";
export default {
  data() {
    return {
      font: {
        text: "",
        color: "#000000",
        fontSize: "18",
        textAlign: "center",
        fontFamily: undefined,
      },
      selectedIndex: 0,
      fonts: [
        {
          name: "默认",
        },
        {
          value: "ALiDaKai",
          name: "阿里大楷",
        },
        {
          value: "ALiLingDong",
          name: "阿里灵动",
        },
        {
          value: "GanBei",
          name: "干杯体",
        },
        {
          value: "Hei",
          name: "阿里黑体",
        },
        {
          value: "JinBu",
          name: "钉钉进步体",
        },
      ],
      active: 0,
    };
  },
  components: {
    tColorPicker,
  },
  props: {
    isShow: {
      type: Boolean,
    },
    fontData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {
    setFont() {
      // console.log('setFont -> this.fontData', this.fontData);
      return this.fontData;
    },
    getRgbaColor() {
      let hexColor = this.font.color.slice(1);

      // 解析RGB部分
      var r = parseInt(hexColor.slice(0, 2), 16);
      var g = parseInt(hexColor.slice(2, 4), 16);
      var b = parseInt(hexColor.slice(4), 16);
      return {
        r,
        g,
        b,
        a: 1,
      };
    },
  },
  methods: {
    onClick(item) {
      this.selectedIndex = item.index;
    },
    onClose() {
      this.$emit("cancel");
      this.selectedIndex = 0;
    },
    setColor(value) {
      this.font.color = value;
    },
    confirm() {
      if (this.font.text === "") {
        return uni.showToast({
          title: "请输入文字",
          icon: "error",
        });
      }
      this.font.color = this.$refs.colorPicker.hex;
      this.$emit("confirm", {
        ...this.font,
      });
      this.font.text = "";
    },
  },
  watch: {
    setFont: {
      handler(val) {
        // console.log('handler -> val', val);//
        this.font = Object.assign(
          {
            text: "",
            fontSize: "18",
            color: "#000000",
            textAlign: "center",
            fontFamily: undefined,
          },
          val
        );
        console.log(this.font);
      },
      deep: true,
    },
  },
};
</script>
<style scoped lang="scss">
.primary {
  width: 109px;
  height: 30px;
  border-radius: 4px;
  background: #6f6f6f14;
  line-height: 30px;
  text-align: center;
  margin-bottom: 12px;
}
.active {
  background: #007aff14;
}
</style>
